<template>
    <div class="user">
        <van-nav-bar title="售卖记录" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>

        <div class="user-order3" style="margin-top: 10px;">
            <div style="display: flex;padding-top: 10px;">
                <img :src="goodinfo.goods.image" alt="" srcset=""
                    style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
                <div
                    style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
                    {{ goodinfo.goods.name }}</div>

                <div style="padding-top: 70px;display: flex;">

                    <div
                        style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 135px;">
                        ￥ {{ goodinfo.price }}
                    </div>
                    <div v-if="recodrInfo.sale_status == 0"
                        style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #CB0000;position: absolute;float: right;right: 20px;">
                        交易中
                    </div>
                    <div v-else
                        style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #CB0000;position: absolute;float: right;right: 20px;">
                        已售卖
                    </div>
                </div>
            </div>
            <div style="height: 20px;"></div>
        </div>

        <div class="user-order3" v-for="(item, index) in goodRecord" :key="index">
            <div style="display: flex;padding-top: 12px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #181818;margin-left: 17px;width: 64px;">
                    订单状态</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #389138;position: absolute;float: right;right: 24px;">
                    {{ formatStuas(item.status) }}</div>
                <!-- //空=全部  0=待支付,1=已支付,2=已取消,3=待发货,4=已发货,5=已完成', -->
            </div>
            <div style="display: flex;padding-top: 19px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 64px;">
                    订单编号</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                    {{ item.order_sn }}</div>
            </div>
            <div style="display: flex;padding-top: 14px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;width: 64;">
                    创建时间</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                    {{ item.create_time_text }}</div>
            </div>
            <!-- /cancel_time_text -->
            <div style="display: flex;padding-top: 14px;" v-if="item.status==2">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;width: 64;">
                    取消时间</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                    {{item.cancel_time_text}}</div>
            </div>
            <div style="height: 20px;"></div>
        </div>

        <!-- <div class="user-order3">
            <div style="display: flex;padding-top: 12px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #181818;margin-left: 17px;width: 64px;">
                    订单状态</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #CB0000;position: absolute;float: right;right: 24px;">
                    已取消</div>

            </div>
            <div style="display: flex;padding-top: 19px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 64px;">
                    订单ID</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                    123456789</div>
            </div>
            <div style="display: flex;padding-top: 14px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;width: 64;">
                    创建时间</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                    2024-07-18 13:57:32</div>
            </div>
            <div style="display: flex;padding-top: 14px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;width: 64;">
                    取消时间</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                    2024-07-18 13:57:32</div>
            </div>
            <div style="height: 20px;"></div> -->
        <!-- </div> -->
    </div>
</template>

<script>
import { weiturecord } from "@/api/user"


export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            rawHtml: '',
            safeHtml: "",
            goodinfo: "",
            goodRecord: [],
            recodrInfo: {},
            activeIndex:""
        };
    },
    created() {
        this.goodinfo = this.$route.query.info
        this.activeIndex = this.$route.query.activeIndex
        this.init()
    },
    methods: {
        init() {
            let obj = {
                ids: this.goodinfo.goods_id
            }
            weiturecord(obj).then((res) => {
                if (res.code == 1) {
                    this.recodrInfo = res.data.trust
                    this.goodRecord = res.data.record
                }
            })
        },

        onClickLeft() {
            this.$route.params.active = this.activeIndex
            this.$router.back()
        },
        //0=待支付,1=已支付,2=已取消,3=待发货,4=已发货,5=已完成'
        formatStuas(val) {
            switch (Number(val)) {
                case 0:
                    return "待支付"
                case 1:
                    return "已支付"
                case 2:
                    return "已取消"
                case 3:
                    return "待发货"
                case 4:
                    return "已发货"
                case 5:
                    return "已完成"
                default:
                    break;
            }
        },
    },
    computed: {

    }
}
</script>

<style scoped>
.user-order3 {
    width: 702px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>